<template>
  <div class="list-item-root">
    <div class="content-con">
      <div class="txt-con">
        <div class="name-title-con">
        <span class="name-con">
          {{ dataItem.tbr }}
        </span>
          <span class="title-con">
          {{ dataItem.bdbt }}
        </span>
        </div>
        <div class="code-con">
          {{ dataItem.bxdhm }}
        </div>
      </div>
      <div class="bt-con">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-menu cursor"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="showInfo" icon="el-icon-search">承保单详情</el-dropdown-item>
            <el-dropdown-item @click.native="showChitGeometry" icon="el-icon-map-location">承保地块空间数据
            </el-dropdown-item>
            <el-dropdown-item @click.native="showDisasterGeometry" icon="el-icon-delete-location">受灾地块空间数据
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "listItem",
  props: {
    dataItem: {
      type: Object
    }
  },
  data() {
    return {}
  },
  methods: {
    viewDetails() {
      const emitType = 'goDetail'
      this.emitData(emitType)
    },
    showInfo() {
      const emitType = 'goChitInfo'
      this.emitData(emitType)
    },
    showDisasterGeometry() {
      const emitType = 'showDisasterGeometry'
      this.emitData(emitType)
    },
    showChitGeometry() {
      const emitType = 'showChitGeometry'
      this.emitData(emitType)
    },
    emitData(type) {
      let {dataItem} = this
      this.$emit(type, dataItem)
    },
  },
  mounted() {
    //设置如果是从农户档案跳过来的自动打开承保地块空间数据
    if(this.$route.query.jumpSign && this.$route.query.jumpSign == "farmersFile"){
      this.showChitGeometry();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.list-item-root {
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  background: #fff;

  .content-con {
    width: 100%;
    border-bottom: 1px solid rgba(220, 223, 230, 1);
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }


  .txt-con, .bt-con {
  }

  .txt-con {
    padding-right: 20px;
    display: flex;
    flex-direction: column;

    .name-title-con, .code-con {
      width: 100%;
    }

    .name-title-con {
      margin-bottom: 5px;

      .name-con, .title-con {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1px;
        line-height: 14px;
      }

      .name-con {
        color: $bt-color;
      }

      .title-con {
        color: rgba(48, 49, 51, 1);
      }
    }

    .code-con {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      color: rgba(144, 147, 153, 1);
      word-break: break-word;
    }
  }

  .bt-con {
    width: 30px;
  }
}
</style>
